/********************************************************************************
 * Copyright (C) 2025 EclipseSource GmbH.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * This Source Code may also be made available under the following Secondary
 * Licenses when the conditions for such availability set forth in the Eclipse
 * Public License v. 2.0 are satisfied: GNU General Public License, version 2
 * with the GNU Classpath Exception which is available at
 * https://www.gnu.org/software/classpath/license.html.
 *
 * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 ********************************************************************************/

/* Import base configuration styles */
@import url("./ai-configuration-base.css");
@import url("./ai-configuration-list-detail.css");
@import url("./ai-configuration-cards.css");
@import url("./ai-configuration-table.css");
@import url("./ai-configuration-hierarchical.css");

/* Import widget-specific styles */
@import url("./widgets/model-aliases-configuration.css");
@import url("./widgets/mcp-configuration.css");

/* Override preferences grid layout for AI Configuration widgets */
.ai-configuration-widget.theia-settings-container {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-template-areas: none;
  max-width: none;
  padding: 0;
}

/* Override max-width constraint from preferences CSS */
.theia-settings-container:has(.ai-configuration-widget),
.ai-configuration-widget.theia-settings-container {
  max-width: none;
  width: 100%;
}

/* Override grid-area assignments from preferences CSS */
.ai-configuration-widget .preferences-tree-widget,
.ai-configuration-widget .preferences-editor-widget {
  grid-area: auto;
  overflow: auto;
}

.ai-configuration-widget {
  max-width: 1000px;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ai-configuration-widget [role="tablist"] {
  overflow: scroll;
  background-color: var(--theia-editor-background);
  border-bottom: var(--theia-border-width) solid var(--theia-widget-border);
}

.ai-configuration-widget [role="tablist"]::-webkit-scrollbar {
  height: 4px;
}

.theia-ai-settings-container {
  padding: var(--theia-ui-padding);
}

.theia-settings-container
  .settings-section-subcategory-title.ai-settings-section-subcategory-title {
  padding-left: 0;
}

.ai-templates {
  display: flex;
  flex-direction: column;
  gap: calc(var(--theia-ui-padding) / 2);
  margin-bottom: calc(var(--theia-ui-padding) * 2);
}

.ai-templates-table {
  width: 100%;
  border-collapse: collapse;
  border: var(--theia-border-width) solid var(--theia-widget-border);
  border-radius: 3px;
}

.ai-templates-table thead th {
  text-align: left;
  padding: var(--theia-ui-padding);
  background-color: var(--theia-editorWidget-background);
  color: var(--theia-descriptionForeground);
  font-weight: 600;
  border-bottom: var(--theia-border-width) solid var(--theia-widget-border);
}

.ai-templates-table tbody td {
  padding: var(--theia-ui-padding);
  border-bottom: var(--theia-border-width) solid var(--theia-widget-border);
}

.ai-templates-table tbody tr:last-child td {
  border-bottom: none;
}

.template-name-cell {
  font-weight: 500;
}

.template-variant-cell {
  width: 200px;
}

.template-actions-cell,
.ai-templates-table thead th.template-actions-header {
  width: 100px;
  text-align: right;
}

.template-action-icon-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: calc(var(--theia-ui-padding) / 2);
  color: var(--theia-icon-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.template-action-icon-button:hover {
  background-color: var(--theia-list-hoverBackground);
}

.template-renderer {
  display: flex;
  flex-direction: column;
  padding: var(--theia-ui-padding);
}

.template-header {
  margin-bottom: calc(var(--theia-ui-padding) / 2);
}

.template-controls {
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
}

.template-select-label {
  margin-right: calc(var(--theia-ui-padding) / 2);
}

.template-variant-selector {
  min-width: 120px;
}

.template-variant-selector.error {
  border-color: var(--theia-errorForeground);
  background-color: var(--theia-errorBackground, rgba(255, 0, 0, 0.1));
  color: var(--theia-errorForeground);
}

#ai-variable-configuration-container-widget,
#ai-agent-configuration-container-widget,
#ai-model-aliases-configuration-widget {
  flex: 1;
  overflow: hidden;
}

/* Section headers and spacing */
.settings-section-title {
  font-size: var(--theia-ui-font-size3);
  font-weight: 600;
  margin: 0 0 calc(var(--theia-ui-padding) * 1.5) 0;
  padding: 0 0 calc(var(--theia-ui-padding) / 2) 0;
  border-bottom: var(--theia-border-width) solid var(--theia-widget-border);
}

.settings-section-title pre {
  font-size: calc(var(--theia-ui-font-size0) * 0.9);
  color: var(--theia-descriptionForeground);
  margin-top: calc(var(--theia-ui-padding) / 2);
}

/* Agent title with toggle */
.agent-title-with-toggle {
  display: block;
}

.agent-title-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(var(--theia-ui-padding) * 2);
}

.ai-id-label {
  display: inline-block;
  margin-left: var(--theia-ui-padding);
}

.agent-enable-toggle {
  display: flex;
  align-items: center;
  gap: calc(var(--theia-ui-padding));
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.toggle-switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--theia-radio-inactiveHoverBackground);
  transition: 0.2s;
  border-radius: 20px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: calc(var(--theia-ui-padding) / 2);
  bottom: calc(var(--theia-ui-padding) / 2);
  background-color: var(--theia-icon-foreground);
  transition: 0.2s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--theia-button-background);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(16px);
  background-color: var(--theia-button-foreground);
}

.toggle-switch:hover .toggle-slider {
  opacity: 0.9;
}

/* Agent status indicator in tree */
.agent-status-indicator {
  font-size: var(--theia-ui-font-size3);
  margin-right: var(--theia-ui-padding);
  display: inline-block;
  line-height: var(--theia-content-line-height);
  align-content: center;
}

.agent-status-indicator.agent-enabled {
  color: var(--theia-charts-green);
}

.agent-status-indicator.agent-disabled {
  color: var(--theia-descriptionForeground);
  opacity: 0.5;
}

/* LLM Requirements and Agent-Specific Variables - Table-like layout */
.ai-llm-requirement-item,
.ai-agent-specific-variable-item {
  border-top: var(--theia-border-width) solid var(--theia-widget-border);
  border-bottom: var(--theia-border-width) solid var(--theia-widget-border);
  padding: calc(var(--theia-ui-padding) * 1.5) 0;
  margin-bottom: calc(var(--theia-ui-padding) * 2);
}

.ai-llm-requirement-item:first-of-type,
.ai-agent-specific-variable-item:first-of-type {
  margin-top: calc(var(--theia-ui-padding));
}

.ai-configuration-value-row {
  display: grid;
  grid-template-columns: 10em 1fr;
  gap: calc(var(--theia-ui-padding) * 2);
  align-items: start;
  padding: calc(var(--theia-ui-padding) / 2) 0;
}

.ai-configuration-value-row-label {
  font-weight: 500;
  color: var(--theia-foreground);
  text-align: left;
  padding-right: var(--theia-ui-padding);
}

.ai-configuration-value-row-value {
  color: var(--theia-foreground);
  word-break: break-word;
}

.ai-configuration-value-row-value.ai-alias-evaluates-to-unresolved {
  color: var(--theia-descriptionForeground);
}

.settings-section-subcategory-title {
  font-size: var(--theia-ui-font-size2);
  font-weight: 600;
  margin: calc(var(--theia-ui-padding) * 3) 0
    calc(var(--theia-ui-padding) * 1.5) 0;
  padding: 0;
  color: var(--theia-foreground);
}

/* Detail pane content sections */
.ai-configuration-detail > div {
  margin-bottom: calc(var(--theia-ui-padding) * 2);
}

.ai-configuration-detail > div:last-child {
  margin-bottom: 0;
}

/* Agent description and enable checkbox */
.ai-configuration-detail label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--theia-ui-padding) / 2);
  cursor: pointer;
  user-select: none;
}

.ai-configuration-detail label input[type="checkbox"] {
  margin: 0;
}

/* Variable and Agent reference lists */
.variable-references,
.function-references {
  list-style: none;
  padding: 0;
  margin: 0;
}

.variable-reference,
.function-reference {
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
  padding: calc(var(--theia-ui-padding) / 2);
}

/* Variable agent list */
.variable-agent-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: var(--theia-widget-border);
  border: var(--theia-border-width) solid var(--theia-widget-border);
  border-radius: 3px;
  overflow: hidden;
}

.variable-agent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--theia-ui-padding) / 1.5) var(--theia-ui-padding);
  background-color: var(--theia-editor-background);
  cursor: pointer;
  transition: background-color 0.1s;
}

.variable-agent-item:hover {
  background-color: var(--theia-list-hoverBackground);
}

.variable-agent-item i {
  color: var(--theia-descriptionForeground);
  opacity: 0.7;
}

.agent-tag {
  padding: calc(var(--theia-ui-padding) * 2 / 3);
  margin-left: var(--theia-ui-padding);
  padding-top: 0px;
  padding-bottom: 0px;
  border-radius: calc(var(--theia-ui-padding) * 2 / 3);
  background: hsla(0, 0%, 68%, 0.31);
}

.configuration-agents-add {
  margin: calc(var(--theia-ui-padding) * 2) var(--theia-ui-padding);
}

.configuration-agents-add button {
  width: 100%;
  margin-left: 0;
}

/* Prompt Fragments Configuration Styles */
.configuration-variables-list,
.token-usage-configuration-container,
.ai-tools-configuration-container,
.ai-prompt-fragments-configuration {
  padding: var(--theia-ui-padding);
  max-width: 1200px;
}

.prompt-fragments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--theia-panelTitle-activeBorder);
}

.prompt-fragments-header h2 {
  margin: 0;
}

.global-actions {
  display: flex;
  gap: 10px;
}

.global-action-button {
  padding: 6px 12px;
  background-color: transparent;
  color: var(--theia-foreground);
  border: 1px solid var(--theia-border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.global-action-button:hover {
  background-color: var(--theia-list-hoverBackground);
}

.prompt-fragments-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.prompt-fragment-group {
  border: 1px solid var(--theia-panelTitle-activeBorder);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 15px;
  background-color: var(--theia-editorWidget-background);
}

.prompt-customization {
  border: 1px solid var(--theia-panelTitle-activeBorder);
  border-radius: 6px;
  margin-bottom: 10px;
  background-color: var(--theia-editor-background);
}

.prompt-customization.active-customization {
  border: 3px solid var(--theia-successBackground);
}

.prompt-customization-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}

.prompt-customization-title {
  display: flex;
  gap: 8px;
  align-items: center;
}

.prompt-customization-actions {
  display: flex;
  gap: 8px;
}

.prompt-customization-description {
  padding: 0px 15px;
  color: var(--theia-descriptionForeground);
  font-size: 12px;
  margin-bottom: 5px;
  font-style: italic;
}

.expansion-icon {
  color: var(--theia-descriptionForeground);
  font-size: 14px;
}

.template-action-button {
  background-color: transparent;
  color: var(--theia-foreground);
  border: 1px solid var(--theia-border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.template-action-button:hover {
  background-color: var(--theia-list-hoverBackground);
}

.template-action-button.reset-button {
  color: var(--theia-foreground);
  border-color: var(--theia-border);
}

.template-action-button.config-button {
  color: var(--theia-foreground);
  border-color: var(--theia-border);
}

.template-action-button.delete-button {
  color: var(--theia-errorForeground);
  border-color: var(--theia-errorForeground);
}

.template-action-button.delete-button:hover {
  background-color: var(--theia-errorBackground);
}

.badge {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.default-variant {
  background: hsla(0, 0%, 68%, 0.31);
  color: var(--theia-foreground);
}

.active-indicator {
  background-color: var(--theia-successBackground);
  color: var(--theia-editor-background);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.selected-indicator {
  background-color: var(--theia-charts-blue);
  color: var(--theia-editor-background);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.source-uri-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--theia-foreground);
  border: 1px solid var(--theia-border);
  border-radius: 4px;
  height: 22px;
  width: 22px;
  margin-left: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.source-uri-button:hover {
  background-color: var(--theia-list-hoverBackground);
}

.no-fragments {
  text-align: center;
  padding: 30px;
  color: var(--theia-descriptionForeground);
  font-style: italic;
}

.prompt-variant-warning {
  color: var(--theia-warningForeground);
  background: var(--theia-warningBackground);
  border-left: 4px solid var(--theia-warningBorder);
  padding: 6px 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 3px;
  font-size: 0.95em;
}

.prompt-variant-error {
  color: var(--theia-errorForeground);
  background: var(--theia-errorBackground);
  border-left: 4px solid var(--theia-errorBorder);
  padding: 6px 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 3px;
  font-size: 0.95em;
}

/* Template content collapsable styles */
.template-content-container {
  padding: 10px;
  background-color: var(--theia-list-focusBackground);
}

.template-toggle-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.template-toggle-button:hover {
  background-color: var(--theia-list-hoverBackground);
}

.template-expansion-icon {
  margin-right: 8px;
  color: var(--theia-descriptionForeground);
  font-size: 14px;
}

.template-content {
  margin-top: 10px;
  padding: 10px;
  background-color: var(--theia-editor-inactiveSelectionBackground);
  border-radius: 4px;
  overflow-x: auto;
}

.template-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
}

.agent-chips-container {
  display: flex;
  gap: 6px;
}

.agent-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--theia-charts-blue);
  color: var(--theia-editor-background);
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

/* Prompt Variants improvements */
.prompt-variants-container {
  margin-bottom: 20px;
}

.prompt-fragment-section {
  border: 1px solid var(--theia-panelTitle-activeBorder);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 15px;
  background-color: var(--theia-editorWidget-background);
}

.prompt-fragment-section.selected-variant {
  border: 3px solid var(--theia-charts-blue);
}

.prompt-fragment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--theia-ui-padding) var(--theia-ui-padding);
  cursor: pointer;
  background-color: var(--theia-editor-background);
  transition: background-color 0.2s;
}

.prompt-fragment-header.expanded {
  border-bottom: 1px solid var(--theia-panelTitle-activeBorder);
}

.prompt-fragment-header:hover {
  background-color: var(--theia-list-hoverBackground);
}

.prompt-fragment-title {
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
}

.prompt-fragment-title h2,
.prompt-fragment-title h4 {
  margin-right: var(--theia-ui-padding);
  margin: 0;
}

.prompt-fragment-title h2 {
  font-size: var(--theia-ui-font-size2);
}

.prompt-fragment-title h4 {
  font-size: var(--theia-ui-font-size1);
}

.prompt-fragment-title .active-indicator {
  margin-right: calc(var(--theia-ui-padding) / 2);
}

.prompt-fragment-body {
  padding: var(--theia-ui-padding) var(--theia-ui-padding) 0
    var(--theia-ui-padding);
}

.prompt-fragment-description p {
  margin-top: 0;
  margin-bottom: var(--theia-ui-padding);
  color: var(--theia-descriptionForeground);
}

.section-header {
  margin: var(--theia-ui-padding) 0;
  color: var(--theia-foreground);
  font-size: var(--theia-ui-font-size2);
}

/* AI Chat View Styles */
.theia-ResponseNode-Content .disable-message {
  font-size: var(--theia-ui-font-size1);
  line-height: 1.6;
  padding: calc(var(--theia-ui-padding) * 2);
}

.theia-WelcomeMessage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.theia-WelcomeMessage-Content {
  text-align: center;
  padding: 0 calc(var(--theia-ui-padding) * 2);
  max-width: 350px;
}

.theia-WelcomeMessage-Content h1 {
  margin-top: 0;
}

.theia-WelcomeMessage-Content p {
  font-size: var(--theia-ui-font-size2);
  line-height: 18px;
}

.theia-WelcomeMessage-Content p .codicon {
  vertical-align: sub;
}

.theia-WelcomeMessage-Content em {
  font-weight: bolder;
  font-style: normal;
}

/*
 * AI Tools Configuration Widget Styles
 * Only touch styles in this section for the tools configuration widget
 */
.ai-tools-configuration-header {
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
  margin-bottom: calc(var(--theia-ui-padding) * 2);
  padding: var(--theia-ui-padding);
  background-color: var(--theia-editor-background);
  border: var(--theia-border-width) solid var(--theia-widget-border);
  border-radius: 3px;
}

.theia-button.secondary.ai-tools-reset-button {
  background-color: var(--theia-radio-inactiveHoverBackground);
}

.theia-button.secondary.ai-tools-reset-button:hover {
  background-color: var(--theia-button-background);
  color: var(--theia-button-foreground);
}

.ai-tools-configuration-default-section {
  margin-bottom: calc(var(--theia-ui-padding) * 2);
}

.ai-tools-configuration-default-label {
  font-weight: bold;
  margin-bottom: var(--theia-ui-padding);
}

.ai-tools-configuration-default-select {
  font-size: 14px;
  padding: var(--theia-ui-padding);
}

.ai-tools-configuration-tools-label {
  font-weight: bold;
  margin-bottom: var(--theia-ui-padding);
}

.ai-tools-configuration-tools-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ai-tools-configuration-tool-item {
  display: flex;
  align-items: center;
  margin-bottom: calc(var(--theia-ui-padding) * 2);
  border-radius: 4px;
  padding: var(--theia-ui-padding);
  transition: background 0.2s, opacity 0.2s;
}

.ai-tools-configuration-tool-item.default {
  opacity: 0.5;
  background: none;
}

.ai-tools-configuration-tool-item.custom {
  opacity: 1;
  background: var(--theia-editor-inactiveSelectionBackground);
}

.ai-tools-configuration-tool-name {
  flex: 1;
}

.ai-tools-configuration-tool-select {
  margin-right: var(--theia-ui-padding);
}

.ai-tools-configuration-tool-icon {
  font-size: 18px;
}

/* End AI Tools Configuration Widget Styles */

/* AI Model Aliases and Language Model Renderer extracted styles */
.ai-model-alias-list {
  width: 25%;
}
.ai-alias-detail-title {
  padding-left: 0;
  padding-bottom: var(--theia-ui-padding);
}
.ai-alias-detail-description {
  padding-bottom: var(--theia-ui-padding);
}
.ai-alias-detail-selected-model {
  margin-bottom: calc(var(--theia-ui-padding) * 2);
}
.ai-language-model-item-ready {
  font-style: normal;
}
.ai-language-model-item-not-ready {
  font-style: italic;
}
.ai-alias-priority-item-resolved {
  font-weight: bold;
}
.ai-alias-priority-item-ready {
  font-style: inherit;
}
.ai-alias-priority-item-not-ready {
  font-style: italic;
}
.ai-alias-detail-defaults {
  margin-bottom: var(--theia-ui-padding);
}
.ai-model-default-not-ready {
  font-style: italic;
  color: var(--theia-descriptionForeground);
}
.ai-alias-defaults-hint {
  color: var(--theia-descriptionForeground);
  margin-top: var(--theia-ui-padding);
}
.ai-alias-evaluates-to-container {
  margin-top: var(--theia-ui-padding);
  margin-bottom: var(--theia-ui-padding);
}
.ai-alias-evaluates-to-label {
  font-weight: 600;
}
.ai-model-status-ready {
  color: var(--theia-ansi-green-color);
  margin-left: var(--theia-ui-padding);
}
.ai-model-status-not-ready {
  color: var(--theia-ansi-red-color);
  margin-left: var(--theia-ui-padding);
}
.ai-alias-evaluates-to-unresolved {
  margin-left: var(--theia-ui-padding);
  color: var(--theia-descriptionForeground);
}
.ai-alias-detail-agents {
  margin-bottom: var(--theia-ui-padding);
}
.ai-alias-agent-id {
  color: var(--theia-descriptionForeground);
  margin-left: var(--theia-ui-padding);
}
.ai-alias-no-agents {
  color: var(--theia-descriptionForeground);
}
/* End AI Model Aliases and Language Model Renderer extracted styles */

/* Token Usage Configuration Styles */
.token-usage-configuration-title {
  margin: 0 0 calc(var(--theia-ui-padding) * 2) 0;
  border-bottom: 1px solid var(--theia-widget-border);
  padding-bottom: var(--theia-ui-padding);
}

.token-usage-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: calc(var(--theia-ui-padding) * 2);
}

.token-usage-refresh-button {
  display: inline-flex;
  align-items: center;
  background-color: var(--theia-button-background);
  color: var(--theia-button-foreground);
  border: none;
  border-radius: 4px;
  padding: var(--theia-ui-padding) calc(var(--theia-ui-padding) * 2);
  font-size: var(--theia-ui-font-size1);
  cursor: pointer;
  transition: background-color 0.2s;
}

.token-usage-refresh-button:hover {
  background-color: var(--theia-button-hoverBackground);
}

.token-usage-refresh-button i {
  margin-right: var(--theia-ui-padding);
}

.token-usage-table-container {
  overflow-x: auto;
  border-radius: var(--theia-ui-padding);
  background-color: var(--theia-editorWidget-background);
}

.token-usage-table {
  width: 100%;
  border-collapse: collapse;
}

.token-usage-header th {
  text-align: left;
  padding: 10px;
  background-color: var(--theia-editor-background);
  color: var(--theia-descriptionForeground);
  font-weight: bold;
}

.token-usage-model-column {
  width: 25%;
}

.token-usage-column {
  width: 18.75%;
}

.token-usage-row td {
  padding: var(--theia-ui-padding);
}

.token-usage-row:hover {
  background-color: var(--theia-list-hoverBackground);
}

.token-usage-summary-row td {
  padding: var(--theia-ui-padding);
  background-color: var(--theia-editor-background);
  color: var(--theia-foreground);
}

.token-usage-model-cell {
  font-weight: 500;
}

.token-usage-notes {
  margin-top: calc(var(--theia-ui-padding) * 2);
  color: var(--theia-descriptionForeground);
}

.token-usage-note {
  display: flex;
  align-items: center;
  font-size: var(--theia-ui-font-size1);
}

.token-usage-note i {
  margin-right: var(--theia-ui-padding);
}

/* Common utility classes for configuration widgets */
.ai-empty-state-content {
  padding: var(--theia-ui-padding);
  text-align: center;
  color: var(--theia-descriptionForeground);
}

.ai-configuration-footer-total {
  margin-top: var(--theia-ui-padding);
}

.ai-configuration-footer-total-row {
  font-weight: 600;
  border-top: 2px solid var(--theia-widget-border);
}

.ai-configuration-info-box {
  margin-top: var(--theia-ui-padding);
  padding: var(--theia-ui-padding);
  background-color: var(--theia-editor-background);
  border-radius: 3px;
}

.ai-configuration-info-text {
  margin: 0;
  color: var(--theia-descriptionForeground);
}

.ai-configuration-info-icon {
  margin-right: calc(var(--theia-ui-padding) / 2);
}

.ai-variable-name-cell {
  font-weight: 500;
}

.ai-variable-description-cell {
  color: var(--theia-descriptionForeground);
}

.ai-configuration-warning-text {
  color: var(--theia-warningForeground);
}

.ai-agent-description {
  margin-bottom: calc(var(--theia-ui-padding) * 2);
  color: var(--theia-descriptionForeground);
  line-height: 1.5;
}
